<template>
	<page-meta :page-style="'overflow:hidden'">
		<gzPageWrapper
			ref="gzPageWrapperRef"
			:styles="{ background: '#F7F8FB url(https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f7e195d9-966c-4ac0-a53d-216a7c4457bc.png) no-repeat 0 0 / 100% 670rpx' }"
			:nav="{ title: '福分乐园', color: '#fff' }"
			:up="{ use: true, auto: false, isLock: true, empty: { use: false } }"
			:down="{ use: true, auto: false, isLock: false }"
			@upCallback="upCallback"
		>
			<template #default>
				<view class="top-content">
					<view class="left">
						<view class="left-top">
							<view>我的福分</view>
							<!-- <view>
								<image src="@/static/new/blessingPoints/score-star-bg.png"></image>
								<text>今日累计获得+{{ vdata.scoreTodayTotalNum }}</text>
							</view> -->
						</view>
						<view class="left-bottom">{{ vdata.socreTotalNum }}</view>
					</view>
					<view v-if="vdata.isToastShow" class="middle">历史福分同步中</view>
					<view class="right">
						<!-- <view>福分规则</view> -->
						<view @tap="toUrl('/pageUser/scoreRecords/index')">福分明细</view>
						<!-- <view @tap="toUrl('/pageUser/scoreHistory/index')">历史福分</view> -->
						<!-- <view @tap="toUrl('/pageUser/scoreRule/index')">福分规则</view> -->
						<view @click="scoreRulePopupRef.open()">福分规则</view>
					</view>
				</view>
				<view class="sign-card">
					<view class="title-wrap">
						<view class="title">每日签到</view>
						<view v-if="vdata.isTodaySign" class="is-sign">今日已签到</view>
						<view v-else class="is-sign" style="color: #999;">今日未签到</view>
					</view>
					<view class="list">
						<template v-for="(item, index) in signCardList">
							<view class="item" :style="{opacity: (index == 0 && vdata.isTodaySign) ? 0.5 : 1}">
								<view style="font-size: 24rpx;color: #bbb;" :style="{ color: (index == 0 && vdata.isTodaySign) ? '#eb9e68' : '#bbb' }">{{ item.scoreNum == ruleJson.sign ? `+${item.scoreNum}` : '连签奖' }}</view>
								<view v-if="item.img === 'signMiss'" class="image">
									<image src="../../static/new/blessingPoints/score-no-bg.png"></image>
									<view>+{{ item.scoreNum }}</view>
								</view>
								<view v-else-if="item.img === 'signYes'" class="image">
									<image src="../../static/new/blessingPoints/score-yes-bg.png"></image>
								</view>
								<view v-else class="image">
									<image src="../../static/new/blessingPoints/score-bg.png"></image>
									<view>+{{ item.scoreNum }}</view>
								</view>
										
								<view class="date">
									{{ item.date }}
								</view>
							</view>
						</template>
					</view>
				</view>
				<view class="task-wrap">
					<view class="task-block">
						<view class="task-title-wrap">
							<view class="task-title">
								<text>每日赚福分</text>
								<text style="color: #2ccd94;display: inline-block;margin-left: 24rpx;font-size: 28rpx;font-weight: normal;">今日累计获得福分：{{ vdata.scoreTodayTotalNum }}</text>
							</view>
							<!-- <view class="task-desc">每项当天仅可获得1次奖励，每日24点任务重置</view> -->
						</view>
				
						<view class="task-list">
							<template v-for="item in taskList" :key="item.ruleKey">
								<view v-if="item.ruleKey !== 'auth'" class="task-item">
									<view class="left">
										<image class="task-icon" :src="iconList[item.ruleKey]"></image>
										<view class="task-name">
											<view>{{ item.scoreRuleName }}</view>
											<view>
												<image src="@/static/new/blessingPoints/score-star-bg.png"></image>
												<text>+{{ JSON.parse(item.ruleJson)[item.ruleKey] }}福分</text>
											</view>
										</view>
									</view>
									<view @click="toUrl(item.url)">
										<view v-if="item.ruleKey === 'sign'" class="right" :class="{ 'done' : vdata.isTodaySign }">
											{{ vdata.isTodaySign ? '已签到' : '去签到' }}
										</view>
										<view v-else class="right">
											去完成
										</view>
									</view>
								</view>
							</template>
							<gzListNull :list="taskList"></gzListNull>
						</view>
					</view>
					<view v-if="!vdata.isAuth && taskList.some(item => item.ruleKey == 'auth')" class="task-block" style="margin-top: 38rpx;">
						<view class="task-title-wrap">
							<view class="task-title" style="padding: initial;">信息完善</view>
						</view>
						<view class="task-list">
							<template v-for="item in taskList" :key="item.ruleKey">
								<view class="task-item" v-if="item.ruleKey === 'auth'">
									<view class="left">
										<image class="task-icon" :src="iconRealname"></image>
										<view class="task-name">
											<view>{{ item.scoreRuleName }}</view>
											<view>
												<image src="@/static/new/blessingPoints/score-star-bg.png"></image>
												<text>+{{ JSON.parse(item.ruleJson).auth }}福分</text>
											</view>
										</view>
									</view>
									<view class="right" @tap="toUrl('/pageUser/realName/index')">
										去完成
									</view>
								</view>
							</template>
							<gzListNull :list="taskList"></gzListNull>
						</view>
					</view>
				</view>
				<!-- 福分商城 -->
				<scoreMall :socreTotalNum="vdata.socreTotalNum" :scoreMallList="vdata.scoreMallList" :exchangeCallback="exchangeCallback" :isLogin="vdata.isLogin" :isToastShow="vdata.isToastShow"></scoreMall>
			</template>
		</gzPageWrapper>
	</page-meta>
	<!-- 登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin"></gzLoginPopup>
	<!-- 旧提示暂时注释 -->
	<!-- <gzPopup ref="gzPopupRef" :rawHtml="vdata.rawHtml"></gzPopup> -->
	<!-- 福分乐园提示 旧提示暂时注释 -->
	<!-- <uni-popup ref="scorePopupRef" type="top" :animation="false" :mask-click="false">
		<view class="score-popup-container">
			<view class="button" @click="() => scorePopupRef.close()"></view>
		</view>
	</uni-popup> -->
	<!-- 福分规则弹窗 -->
	<scoreRulePopup ref="scoreRulePopupRef" />
	<!-- 公共温馨提示弹窗（新版） -->
	<gzTipPopup ref="gzTipPopupRef" >
		<view class="tip-container">
			<view class="title">尊敬的用户：</view>
			<view class="subtitle">为便于您了解福分相关调整，现通知如下：​</view>
			<view class="text">自 8 月起，福分活动规则调整，取消资产等级、绑卡消费对应的福分获取渠道。目前可通过签到、邀约好友、实名认证等方式获取福分，后续更多活动将陆续推出，敬请期待。​</view>
			<view class="text">同时，我们将为您补发 6 月、7 月期间的资产等级及绑卡消费福分。​</view>
			<view class="text">请您知晓，所有福分暂不失效，若有变动，我们将及时发布通知。如有任何疑问，可咨询您的客户经理。​</view>
		</view>
	</gzTipPopup>
</template>

<script setup>
import scoreMall from './components/scoreMall.vue'
import dayjs from 'dayjs'
import { reactive, ref, onMounted, nextTick, getCurrentInstance } from 'vue'
import { onLoad, onShow, onPageScroll, onHide, onUnload } from '@dcloudio/uni-app'
import { $historyScoreSync, $scoreMallList, $scoreCoupon, $fansDetail, $fufenAmusementPark } from '@/http/apiManager'
import storageManage from '@/util/storageManage.js'
import iconSign from '@/static/new/blessingPoints/icon-sign.png'
import iconInvite from '@/static/new/blessingPoints/icon-invite.png'
import iconCoupon from '@/static/new/blessingPoints/icon-coupon.png'
import iconRealname from '@/static/new/blessingPoints/icon-realname.png'
import appConfig from '../../config/appConfig'
import scoreRulePopup from './components/scoreRulePopup.vue'

const { $infoBox } = getCurrentInstance().appContext.config.globalProperties

// 旧提示暂时注释
// const gzPopupRef = ref();
// const scorePopupRef = ref()

// 福分规则弹窗
const scoreRulePopupRef = ref();
// 公共温馨提示弹窗
const gzTipPopupRef = ref();

const iconList = {
	sign: iconSign,
	inviter: iconInvite,
	coupon: iconCoupon
}
const gzPageWrapperRef = ref()
const gzLoginPopupRef = ref()
const vdata = reactive({
	socreTotalNum: 0,	// 福分总量
	scoreTodayTotalNum: 0,	// 用户当日获得福分总量
	// #ifdef MP-ZYX
	// isToastShow: true,	// “历史福分同步中”提示是否显示
	// #endif
	isLogin: false,	// 用户登录状态
	scoreMallList: [],	// 福分商城列表
	isAuth: false,	// 是否实名
	
	isTodaySign: false,	// 当天是否签到	默认未签到
	// rawHtml: '<div style="font-size: 32rpx;font-weight: bold;">尊敬的客户，您好：</div><br/><div>&emsp;&emsp;1.您可在“郑邮享”小程序通过签到、实名认证、核销权益卡券功能获得福分。<br/>&emsp;&emsp;2.“郑州邮政权益中心”小程序未使用的福分将迁移至“郑邮享”，预计十月中旬迁移完，有效期统一延长至2024年11月30日。以后福分将在该平台运营。<br/>&emsp;&emsp;3.福分、福券事项可通过电话咨询客户经理。方法通过“郑州邮政福利社”公众号输入“网点导航”、“最近网点”查询网点信息。<br/></div>'
	rawHtml: '<div style="font-size: 32rpx;font-weight: bold;">尊敬的用户：</div><br/><div>&emsp;&emsp;为便于您了解福分相关调整，现通知如下：<br/>&emsp;&emsp;自 8 月起，福分活动规则调整，取消资产等级、绑卡消费对应的福分获取渠道。目前可通过签到、邀约好友、实名认证等方式获取福分，后续更多活动将陆续推出，敬请期待。<br/>&emsp;&emsp;同时，我们将为您补发 6 月、7 月期间的资产等级及绑卡消费福分。<br/>&emsp;&emsp;请您知晓，所有福分暂不失效，若有变动，我们将及时发布通知。如有任何疑问，可咨询您的客户经理。<br/></div>'
})
// 任务列表 也就是福分规则列表
const taskList = ref([])
// 签到规则 连签规则
const ruleJson = ref({ sign: 2, signLink: 4, period: 3 })
// 签到卡列表
const signCardList = ref([
	{ scoreNum: ruleJson.value.sign, date: '今天', img: 'signNo' },	// 只有今天的img会动态变化
	{ scoreNum: ruleJson.value.sign, date: '第2天', img: 'signNo' },
	{ scoreNum: ruleJson.value.signLink, date: '第3天', img: 'signNo' },
	{ scoreNum: ruleJson.value.signLink, date: '第4天', img: 'signNo' },
	{ scoreNum: ruleJson.value.signLink, date: '第5天', img: 'signNo' },
	{ scoreNum: ruleJson.value.signLink, date: '第6天', img: 'signNo' },
	{ scoreNum: ruleJson.value.signLink, date: '第7天', img: 'signNo' },
])

// 任务列表字典 用于补充跳转路径
const taskMap = {
	sign: { url: '/pageScore/signIn/index' },
	auth: { url: '/pageUser/realName/index' },
	inviter: { url: '/pageUser/invite/index' },
	coupon: { url: `/pageUser/myCoupon/index?tabCurrent=${1}&couponState=${0}` }
}

onLoad(async () => {
	// 注册定位信息通知 用于更新定位信息
	uni.$on('UPDATE_AGENT_INFO',onUpdateAgentInfoHandle)
	// 注册页面通讯
	uni.$on('SCORE_INIT_PAGE',initPage)
	uni.showLoading({ title: '加载中...' })
	await initPage()
	uni.hideLoading()
	// // #ifdef MP-ZYX
	// tipsEveryWeek()	// 福分乐园提示每周一次（图片）
	// tipsEveryday()	// 福分乐园提示每天一次（文本）
	// // #endif
	tipsEveryday()	// 福分乐园提示每天一次（文本）
	getScoreMallList()	// 福分商城列表
})
onShow(() => {
	vdata.isLogin = storageManage.isLogin()
	// 刷新用户实名问题
	getUserAuth()
	// 请求福分相关数据
	getAggregateData()
})
onHide(() => {
	if(timer){
		clearInterval(timer)
	}
})
onUnload(() => {
	// 注销页面通讯
	uni.$off('SCORE_INIT_PAGE')
})

// 页面初始化
async function initPage(){
	if(storageManage.isLogin()){ // 如果用户登陆 处理福分商城相关数据
		// 获取用户实名状态
		await getUserAuth()
		// 请求福分相关数据
		await getAggregateData()
		// 同步历史福分
		// historyScoreSync()
	}
} 
// 定位信息更新事件处理（更新福分商城列表）
async function onUpdateAgentInfoHandle(e){
	// 重新拉取福分商城列表
	uni.showLoading({ title: '加载中...', mask: true})
	await getScoreMallList()
	uni.hideLoading()
}

// 当天是否签到 签到记录 福分规则 当日获得福分总量 福分总量合并接口
async function getAggregateData(){
	const TODAY = dayjs().format('YYYY-MM-DD');	// 当天日期 用于请求签到记录
	const YESTODAY = dayjs().subtract(1,'days').format('YYYY-MM-DD');	// 昨天日期 用于请求签到记录
	const CURRENT_D = dayjs().format('D');	// 当前日期的天 用于判断当天是否是当月的第一天 如果是的话 则请求上个月的签到日期
	const payload = {
		time: CURRENT_D == 1 ? YESTODAY : TODAY,	// 请求签到记录
		// agentNo: storageManage.agentInfo().agentNo,	// 当前小程序的机构号 用来查询福分规则 【agentNo前端不再传递，后端通过header取到的小程序appid去查询对应的agentNO】
	}	
	const { bizData } = await $fufenAmusementPark(payload)
	// 当天是否签到，签到记录，福分规则，总福分数，当日获得福分数量
	const { checkSign, getSignList, ruleList, score, userScoreSum } = bizData
	// 福分规则处理 -- 必须优先处理 后面数据依靠该接口数据
	scoreRuleHandle(ruleList)
	if(storageManage.isLogin()){
		// 福分总量处理
		scoreTotalNumHandle(score)
		// 当日获得福分总量
		scoreTodayTotalNumHandle(userScoreSum)
		// 签到记录处理
		scoreRecordHandle(getSignList)
		// 当天是否签到处理
		checkTodaySign(checkSign)
	}else{
		// 恢复数据为初始数据
		setToRawData()
	}
}

// 福分规则数据处理 scoreRuleList 福分规则列表
function scoreRuleHandle(scoreRuleList){
	taskList.value = scoreRuleList.map(item => {
		if(item.ruleKey === 'sign'){	// 签到规则特殊处理 获取连签规则
			ruleJson.value = JSON.parse(item.ruleJson)	// 记录签到规则
			return { ...item, url: `${taskMap[item.ruleKey].url}?rule=${encodeURI(JSON.stringify(item))}` }
		}
		return { ...item, url: taskMap[item.ruleKey].url }
	})
}

// 福分总量
function scoreTotalNumHandle(scoreTotalNum){
	vdata.socreTotalNum = scoreTotalNum
}

// 当日获得福分总量
function scoreTodayTotalNumHandle(scoreTodayTotalNum){
	vdata.scoreTodayTotalNum = scoreTodayTotalNum
}

// 构建历史签到数组
function createHistorySign(){
	const tempArr = []
	for(let i = ruleJson.value.period - 1;i>0;i--){
		tempArr.push({ createdAt: dayjs().subtract(i, 'day'), score: 0, isSign: false})
	}
	return JSON.parse(JSON.stringify(tempArr))
}

// 签到记录处理
function scoreRecordHandle(scoreRecord){
	// 构建历史签到数组
	const historySigns = createHistorySign()
	// 还需要拿到上个月的签到记录
	let linkDays = 0	// 连续签到的天数
	let diff = 0	// 连续签到还差几天
	scoreRecord.forEach(record => {
		historySigns.forEach(history => {
			if(dayjs(record.createdAt).isSame(history.createdAt, 'day')){
				history.isSign = true
			}
		})
	})
	// 连续签到天数
	historySigns.forEach(history => {
		if(history.isSign){
			linkDays += 1
		}else{
			linkDays = 0
		}
	})
	const today = dayjs().startOf('day');
	const todaySigned = scoreRecord.find(day => dayjs(day.createdAt).startOf('day').isSame(today, 'day'));
	const yesterday = today.subtract(1, 'day').startOf('day');
	const yesterdaySigned = scoreRecord.find(day => dayjs(day.createdAt).startOf('day').isSame(yesterday, 'day'));
	// 今天是否签到
	if(todaySigned){
		// 如果说今天签到了
		signCardList.value[0] = { scoreNum: todaySigned.score, date: '今天', img: 'signYes' };	// 更改为已签到图标
	}else{
		// 如果今天没签到 要拿历史签到数据 来判断今天签到奖励福分数量
		if(linkDays >= ruleJson.value.period - 1){	// 连续签到 今天奖励的福分是连续签到的福分
			signCardList.value[0] = { scoreNum: ruleJson.value.signLink, date: '今天', img: 'signNo' };
		}else{	// 不是连续签到
			signCardList.value[0] = { scoreNum: ruleJson.value.sign, date: '今天', img: 'signNo' };
		}
	}
	// 处理今天以后的奖励福分
	if(linkDays >= ruleJson.value.period - 1){	// 连续签到
		signCardList.value.forEach((item,index) => {
			if(index > 0){	// 今天以后
				item.scoreNum = ruleJson.value.signLink
			}
		})
	}else{	// 没有连续签到
		// 计算还差几天
		diff = ruleJson.value.period - linkDays - 1
		signCardList.value.forEach((item,index) => {
			if(index > 0){
				if(index <= diff - 1){
					item.scoreNum = ruleJson.value.sign
				}else{
					item.scoreNum = ruleJson.value.signLink
				}
			}
		})
	}
}

// 当天是否签到
function checkTodaySign (signResult) {
	if(dayjs().isSame(storageManage.isSign(),'days')){
		vdata.isTodaySign = true	// 已签到
		return
	}
	if(signResult.flag === 'true'){
		vdata.isTodaySign = false	// 未签到
	}else{
		vdata.isTodaySign = true	// 已签到
	}
	// 本地缓存当天签到 记录 签到日期
	if(vdata.isTodaySign){
		storageManage.isSign(dayjs().format('YYYY-MM-DD'))
	}
}

// 校验用户实名状态
async function getUserAuth(){
	if(storageManage.userInfo()){
		vdata.isAuth = storageManage.userInfo().isAuth == 0 ? true : false
	}else{
		const { bizData:fansInfo } = await $fansDetail()
		vdata.isAuth = fansInfo.isAuth == 0 ? true : false
		storageManage.userInfo(fansInfo)
	}
}

// 如果用户未登录所使用的默认数据
function setToRawData(){
	vdata.socreTotalNum = 0	// 福分总量
	vdata.scoreTodayTotalNum = 0	// 当日总福分数量
	vdata.isAuth = false	// 是否实名
	vdata.isTodaySign = false	// 当日是否签到
	vdata.isToastShow = false	// 关闭历史福分同步显示
	// 签到卡状态初始化
	signCardList.value = [
		{ scoreNum: ruleJson.value.sign, date: '今天', img: 'signNo' },	// 只有今天的img会动态变化
		{ scoreNum: ruleJson.value.sign, date: '第2天', img: 'signNo' },
		{ scoreNum: ruleJson.value.signLink, date: '第3天', img: 'signNo' },
		{ scoreNum: ruleJson.value.signLink, date: '第4天', img: 'signNo' },
		{ scoreNum: ruleJson.value.signLink, date: '第5天', img: 'signNo' },
		{ scoreNum: ruleJson.value.signLink, date: '第6天', img: 'signNo' },
		{ scoreNum: ruleJson.value.signLink, date: '第7天', img: 'signNo' },
	]
}

/**
 * 下拉刷新
 */
async function upCallback(mescroll){
    mescroll.hideUpScroll()    // 隐藏上拉加载的布局
    try{
		// 请求福分相关数据
		if(vdata.isLogin){
			await Promise.allSettled([getUserAuth(),getAggregateData()])
		}
		// 请求福分商城列表
		await getScoreMallList()
        mescroll.endSuccess(0)
    }catch(e){
        mescroll.endErr()
    }
}


/**
 * 控制提示弹窗每天提示一次
 */
function tipsEveryday(){
	// 上次提示时间
	const LAST_TIPS_TIME = uni.getStorageSync('LAST_TIPS_TIME')
	
	if(!LAST_TIPS_TIME){	// 没有上次提示时间 直接提示
		// 打开提示弹窗 并记录时间
		nextTick(() => {
			// 旧提示暂时注释
			// gzPopupRef.value.open()
			gzTipPopupRef.value.open()	// 新弹窗
			uni.setStorageSync('LAST_TIPS_TIME',dayjs().format('YYYY-MM-DD'))
		})
		return
	}
	// 存在提示时间 判断是否是同一天
	if(dayjs(LAST_TIPS_TIME).isSame(dayjs(),'day')){	// 是同一天 不在进行弹窗提示
		return
	}
	// 不是同一天 进行弹窗提示 并记录时间
	nextTick(() => {
		// 旧提示暂时注释
		// gzPopupRef.value.open()
		gzTipPopupRef.value.open()	// 新弹窗
		uni.setStorageSync('LAST_TIPS_TIME',dayjs().format('YYYY-MM-DD'))
	})
}
/**
 * 控制福分弹窗每周一次	旧提示暂时注释
 */
function tipsEveryWeek(){
	// 上次提示时间
	const LAST_TIPS_TIME_SCORE = uni.getStorageSync('LAST_TIPS_TIME_SCORE')
	
	if(!LAST_TIPS_TIME_SCORE){	// 没有上次提示时间 直接提示
		// 打开提示弹窗 并记录时间
		nextTick(() => {
			scorePopupRef.value.open()
			uni.setStorageSync('LAST_TIPS_TIME_SCORE',dayjs().format('YYYY-MM-DD'))
		})
		return
	}
	// 存在提示时间 判断是否是同一周
	if(dayjs(LAST_TIPS_TIME_SCORE).subtract(1,'day').isSame(dayjs().subtract(1,'day'),'week')){	// 是同一周 不在进行弹窗提示
		return
	}
	// 不是同一周 进行弹窗提示 并记录时间
	nextTick(() => {
		scorePopupRef.value.open()
		uni.setStorageSync('LAST_TIPS_TIME_SCORE',dayjs().format('YYYY-MM-DD'))
	})
}

// 路由跳转
function toUrl(url) {
	getApp().preventActive(()=>{
		if(!vdata.isLogin){
			return gzLoginPopupRef.value.open()
		}
		if(vdata.isToastShow) return	// 历史福分正在同步中 不允许操作兑换
		uni.navigateTo({
			url
		})
	})
}
// 商城兑换回调	
function exchangeCallback() {
	getScoreMallList()	// 刷新福分列表
	getSocreTotalNum()	//请求福分剩余
}

/**
 * 福分商城数据	前面最多展示十条
 */
async function getScoreMallList() {
    const { bizData } = await $scoreMallList({ agentNo: storageManage.agentInfo().agentNo, pageSize: 10, pageNumber: 1 })
    vdata.scoreMallList = bizData.records
}

/**
 * 获取福分数量
 */
async function getSocreTotalNum() {
	const { bizData } = await $scoreCoupon()
	vdata.socreTotalNum = bizData.score
}

/**
 * 历史福分同步 相关js代码 （后期下掉）
 */
let timer = null	// 请求同步定时器
const historyScoreSync = () => {
	// 获取本地缓存 是否已完成同步
	const IS_SYNC = uni.getStorageSync('IS_SYNC')
	if(IS_SYNC){	// 如果已完成同步 则不再进行请求
		vdata.isToastShow = false
		return
	}

	let isSyncing = false
	timer = setInterval(function startSetInterval(){
		if(isSyncing) return startSetInterval	// 正在同步中 不再请求
		isSyncing = true
		// 开始历史福分同步
		$historyScoreSync({ openId: storageManage.placeOpenId() }).then(({ bizData }) => {
			// 完成同步本地记录 关闭顶部同步提示 展示同步结果 停掉定时器
			uni.setStorageSync('IS_SYNC',true)
			vdata.isToastShow = false
			$infoBox.toast(`${bizData}`)
			clearInterval(timer)
		}).catch((e) => {
			isSyncing = false	// 同步失败 结束本次同步 继续下次同步
		})
		return startSetInterval
	}(),3000)
}
</script>

<style lang="less" scoped>
.tip-container{
	.title,.subtitle{
		font-weight: bold;
	}
	.subtitle,.text{
		text-indent: 2em;
		margin-top: 10rpx;
	}
}
.score-popup-container{
	width: 100%;
	height: 100vh;
	max-height: 1396rpx;
	background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/fufen-popup.png') no-repeat left top / 100% 100%;
	position: relative;
	.button{
		width: 238rpx;
		height: 82rpx;
		position: absolute;
		bottom: 60rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.top-content {
	margin-top: 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;

	.left {
		margin-left: 40rpx;

		.left-top {
			display: flex;

			view {
				&:nth-child(1) {
					font-size: 28rpx;
				}

				&:nth-child(2) {
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
						position: relative;
						right: -18rpx;
					}

					text {
						font-size: 20rpx;
						padding: 6rpx 12rpx 6rpx 30rpx;
						background: #09AD6F;
						border-radius: 0 20rpx 20rpx 0;
					}
				}
			}
		}

		.left-bottom {
			font-weight: bold;
			font-size: 76rpx;
			margin-top: 26rpx;
		}
	}
	
	.middle{
		align-self: flex-start;
		padding: 10rpx 40rpx;
		background-color: rgba(0,0,0,0.5);
		font-size: 24rpx;
		border-radius: 25rpx;
	}

	.right {
		font-size: 24rpx;
		display: flex;
		flex-direction: column;
		gap: 28rpx;

		view {
			padding: 12rpx 12rpx 12rpx 22rpx;
			border-radius: 30rpx 0 0 30rpx;
			background: #24C789;
		}
	}
}

.sign-card {
	padding: 16rpx;
	margin: 32rpx 24rpx 24rpx;
	background: linear-gradient(to bottom, #D6FBEE 0%, #FFFFFF 39%, #FFFFFF 100%);
	border-radius: 20rpx;
	border: 4rpx solid #FFFFFF;

	.title-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 52rpx;

		.title {
			font-weight: bold;
			font-size: 34rpx;
			color: #000000;
		}

		.is-sign {
			font-size: 26rpx;
			color: #24C789;
		}
	}

	.list {
		display: flex;
		gap: 10rpx;

		.item {
			text-align: center;
			background: #f5f5f2;
			border-radius: 8rpx;
			padding: 8rpx;
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 10rpx;
			justify-content: center;
			align-items: center;

			.image {
				width: 62rpx;
				height: 62rpx;
				position: relative;

				image {
					width: 62rpx;
					height: 62rpx;
					position: absolute;
					left: 0;
					top: 0;
				}

				view {
					line-height: 62rpx;
					font-size: 24rpx;
					text-align: center;
					color: #fff;
					position: relative;
				}
			}

			.date {
				font-size: 22rpx;
				// color: #BBBBBB;
				color: #eb9e68;
			}
		}
	}
}

.task-wrap {
	background: #fff;
	margin: 24rpx;
	padding: 0 32rpx 38rpx;
	border-radius: 20rpx;
	background-image: url('@/static/new/blessingPoints/gift-bg.png');
	background-size: 288rpx 160rpx;
	background-position: top right;
	background-repeat: no-repeat;

	.task-block {
		.task-title-wrap {
			.task-title {
				padding: 52rpx 0 24rpx 0;
				font-size: 34rpx;
				font-weight: bold;
			}

			.task-desc {
				font-size: 22rpx;
				color: #999999;
			}
		}

		.task-list {
			margin-top: 48rpx;
			display: flex;
			flex-direction: column;
			gap: 40rpx;

			.task-item {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					display: flex;
					align-items: center;

					.task-icon {
						width: 60rpx;
						height: 80rpx;
						margin-right: 24rpx;
					}

					.task-name {
						view {
							&:nth-child(1) {
								font-weight: bold;
								font-size: 30rpx;
								margin-bottom: 16rpx;
							}

							&:nth-child(2) {
								margin-left: -18rpx;
								display: flex;
								align-items: center;

								image {
									width: 36rpx;
									height: 36rpx;
									position: relative;
									right: -18rpx;
								}

								text {
									color: #FF8833;
									font-size: 24rpx;
									padding: 2rpx 10rpx 2rpx 30rpx;
									background: #FBF0E8;
									border-radius: 0 20rpx 20rpx 0;
								}
							}
						}
					}
				}

				.right {
					background: #24C789;
					border-radius: 38rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					padding: 15rpx 24rpx;
					margin: 0;
					line-height: initial;
				}

				.done {
					background: #a0a0a0;
					box-shadow: 0rpx 6rpx 14rpx 0rpx #e6e6e6;
				}
			}
		}
	}
}
</style>